<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue';
    import { api } from '@/services/api';
    import { ArticleRecommendItem } from '@/services/type';

    import moment from 'moment';
    
    // 初始化正在加载中
    const loading = ref(true);
    // 博客推荐信息
    const recommendData = reactive<ArticleRecommendItem[]>([]);

    onMounted(async () => {
        // 获取推荐信息
        const response = await api.common.getRecommendList()
        // 如果状态返回失败
        if(response.code !== 0) return; 
        // 结果赋值
        recommendData.push(...response.data);
        // 加载结束
        loading.value = false;
    });

</script>
<template>
    <div class="sideTab">
        <div class="sideTab-title">
            博客推荐
        </div>
        <div class="recommend-box">
            <el-skeleton :loading="loading" animated>
                <template #default>
                    <ul class="recommend-list">
                        <li class="recommend-item" v-for="(item, index) in recommendData" :key="index">
                            <i>
                                <router-link :to="'/blog/detail/' + item.wznm" target="_blank">
                                    <img :src="item.thumb"/>
                                </router-link>
                            </i>
                            <b><a :href="'/blog/detail/' + item.wznm" target="_blank">{{item.title}}</a></b>
                            <span class="content">
                                {{item.description}}
                            </span>
                            <el-tag style="float: left;margin-top: 21px;"><el-icon><Folder /></el-icon>&nbsp;{{item.columnName}}</el-tag>
                            <span class="metadata">
                                <span class="date">{{ moment(item.time).startOf('minute').fromNow() }}</span>
                            </span>
                        </li>
                    </ul>
                </template>
            </el-skeleton>
        </div>
    </div>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />